<template>
	<view class="w-100">
		<view class="flex-1" :style="'height:' + statusBarHeight + 'px;'"></view>
		<view class="flex-1 goods-rotation-box">
			<image :src="portfoliodetail.main_image" mode=""></image>
			<view class="flex-1 nav-box">
				<view class="flex-1 ml-3 mt-3">
					<view class="iconfont icon-back2-01 row" @click="toBack"></view>
				</view>
			</view>
		</view>
		<view class="mt-2 flex-1 mx-3 bg-white p-3">
			<view class="font-s-45 font-w mt-2">{{ portfoliodetail.portfolio_name }}</view>
			<view class="row-ac mt-2">
				<view class="font-s-45">套餐价:<text class="ml-2">¥{{ portfoliodetail.price }}</text></view>
				<view class="text-light-grey text-de ml-3">原 价:<text class="ml-2">¥{{ portfoliodetail.mar_price }}</text></view>
			</view>
			<view class="mt-2 font-s-45">升级:<text class="ml-2">{{ portfoliodetail.identity_name }}</text></view>
		</view>
		<view class="flex-1 row py-3 font-s-45 font-w">------组合套餐------</view>
		<view class="flex-1 mx-3 bg-white py-2">
			<view class="min-portfolio">
				<scroll-view scroll-x class="scroll-row min-portfolio">
					<view class="scroll-row-item portfolio-item" v-for="(item,index) in portfoliodetail.main_products"
						:key="index">
						<image class="min-img" :src="item.image_list[0].url" />
						<view class="flex-1 in1line font-s-3 text-center">{{ item.product_name }} x {{ item.quantity }}</view>
						<!-- <view class="flex-1 in1line font-s-2 text-center">原价{{ item.product_price }}</view> -->
					</view>
				</scroll-view>
			</view>
		</view>
		<view class="flex-1 row py-3 font-s-45 font-w" v-if="portfoliodetail.gift_products.length > 0">------赠送------</view>
		<view class="flex-1 mx-3 bg-white py-2" v-if="portfoliodetail.gift_products.length > 0">
			<view class="min-portfolio">
				<scroll-view scroll-x class="scroll-row min-portfolio">
					<view class="scroll-row-item portfolio-item" v-for="(item,index) in portfoliodetail.gift_products"
						:key="index">
						<image class="min-img" :src="item.image_list[0].url" />
						<view class="flex-1 in1line font-s-3 text-center">{{ item.product_name }}</view>
						<!-- <view class="flex-1 in1line font-s-2 text-center">原价{{ item.product_price }}</view> -->
					</view>
				</scroll-view>
			</view>
		</view>
		<view class="flex-1" style="height: 160rpx;"></view>
		<view class="flex-1 fixed-bottom bg-white border-top" style="height: 160rpx;">
			<view class="flex-1 row-ac mx-3" style="height: 160rpx;">
				<view class="flex-1 row-ac font-s-45 fonw">总价:<text class="ml-3">¥{{ portfoliodetail.price }}</text></view>
				<view class="report-box font-s-3" @click="portfolioOrder">立即报单</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		productportfoliodetailUrl,
		portfolioordercreateUrl
	} from "@/api/promotion.js"
	export default {
		data() {
			return {
				portfoliodetail: '',
				FormData:{
					portfolio_id:''
				}
			}
		},
		onLoad(options) {
			this.getPortfoliodetail(options.portfolioId)
		},
		methods: {
			getPortfoliodetail(portfolioId) {
				this.$R.get(productportfoliodetailUrl + portfolioId + '/').then(res => {
					if (res.code == 200) {
						this.portfoliodetail = res.data
						this.FormData.portfolio_id = res.data.id
					}
				})
			},
			portfolioOrder(){
				this.$R.post(portfolioordercreateUrl, this.FormData).then(res => {
					if (res.code == 200) {
						uni.showToast({
							title: '报单成功',
							icon: 'none'
						});
						this.orderId = res.data.id
						uni.navigateTo({
							url: '/pages/order/report?orderId=' + this.orderId,
						});
					}
				})
			},
			toBack() {
				uni.navigateBack({
					delta: 1
				});
			},
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #f5f5f5;
	}

	.goods-rotation-box {
		position: relative;

		image {
			width: 750rpx;
			height: 750rpx;
		}
		.nav-box {
			position: absolute;
			top: 25rpx;
			left: 0;
			right: 0;
		
			.iconfont {
				width: 68rpx;
				height: 68rpx;
				border-radius: 50%;
				background-color: rgba(0, 0, 0, .6);
				color: #fff;
			}
		}
	}

	.min-portfolio {
		width: 690rpx;
		height: 328rpx;
	}

	.portfolio-item {
		width: 220rpx;
		height: 328rpx;
		margin-right: 30rpx;
		.min-img{
			width: 220rpx;
			height: 220rpx;
		}
	}
	.report-box{
		padding: 16rpx 26rpx;
		background-color: #000;
		color: #fff;
	}
</style>